<!DOCTYPE html> 
 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>图片轮换</title> 
    <style type="text/css">
      .picBox{width: 620px;height: 340px;}
    </style>
    <script language="javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">

    $(function(){
        $('#picBox').addClass('picBox');
        $('#picBox p').css({
          'margin': '0px',
          'padding': '0px',
          'width':'620px',
          'height':'340px',
          'display':'none'
        })
        .attr({
          id: function(index,oldValue){
            return 'picId_'+index;
          }
        });

        var currentPostionX = $('#picBox p').eq(0).offset().left;
        console.log("currentPostionX=="+currentPostionX);
         $('#picBox p')
        .css({
          'position': 'absolute'
        })

        // $('#picBox p').eq(0)
        // .show()
        // .animate({
        //   left: (currentPostionX + 620) + 'px'},
        //   500, function() {
        //   /* stuff to do after animation is complete */
        // })
        // .next()
        // .show()
        // .animate({
        //   left: (currentPostionX + 620) + 'px'},
        //   500, function() {
        //   /* stuff to do after animation is complete */
        // });
        $('#picBox p').eq(0)
        .show()
        .slideDown('32000').next().slideUp('32000');
       
       

    })
    </script>
  </head> 
 
  <body>  
    <div id="picBox">
      <p style="postion:absolute"><img src="images/pic1.jpg"></p>
      <p><img src="images/pic2.jpg"></p>
      <p><img src="images/pic3.jpg"></p>
      <p><img src="images/pic4.jpg"></p>
    </div>
  </body> 
</html>